<template>
  <div class="wor">
    <div style="background-color: #f1f1f1;width: 100%">
      <div class="titleBox" :ListData="ListData">
        <el-button-group class="title" >
          <el-popover ref="popover4" placement="bottom" width="100" trigger="hover" style="padding:0px;" :value="show">
            <div class="navCard" v-for = "(list,index) in botData" @click="chart(list.bizId,0);show = false" :key="index">
              <p class="" style="">{{list.name}}</p>
            </div>
          </el-popover>
          <!--<el-button  class="bot" style="border-radius:4px 0px 0px 4px; background-color: #fc8c00;color:#fff" v-popover:popover4>-->
           <!--<span class="icon">特</span> 特色业务-->
          <!--</el-button>-->
          <el-button  class="bot" v-for = "(dat,index) in botData2" @click="chart(dat.bizId,index)" :key="index" :class="{check:check == index}" >{{dat.name}}</el-button>
          <!--<el-button size="small" class="bot" style="border-radius:0px 4px 4px 0px;">我要合作</el-button>-->
        </el-button-group>
      </div>
    </div>
    <div class="cent">
      <div class="listBox clearfix">
        <!--<div class="title">-->
          <!--<p class="titleText">{{fromData.title}}</p>-->
          <!--<p class="time">2015-17-28: 15:30</p>-->
        <!--</div>-->
        <div class="ditleCent ql-editor" :DetailData="DetailData">
              <div class=" ql-container" v-html="fromData.content">

              </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .titleBox{width:70%;padding:28px;padding-bottom:28px; min-width:1000px;max-width: 1200px;margin:auto;text-align: left;height: auto;min-height: 60px}
  .titleBox .title{ }
  .wor .check{background-color: #0062a2;color: #fff }
  .titleText{font-size: .18rem; text-align: center;line-height: .6rem}
  .ditleCent{padding-top: .4rem;min-height: 5rem;margin: auto}
  .navCard { height: 40px;line-height: 40px; text-align: center}
  .navCard:hover {background-color: #0062a2;color: #fff}
  .navCard P{font-size: .14rem; line-height:  40px;cursor: pointer;width: 80%;border-bottom:1px solid #ccc;margin: auto }
  .time{font-size: 12px; text-align: center;line-height: .2rem;color: #909090}
  .icon{ padding: 2px 4px; border: 2px solid #fff;border-radius: 20px;}
  .cent{width:70%;background-color:#fff;padding:.2rem;min-width:1000px;max-width: 1200px;margin:auto}
  .nave{width: 100%;line-height: .3rem;}
  .bot{width: 170px;margin-bottom:.10rem; background-color: #fff ; color: #000 ; font-size:14px;padding-top: 15px;padding-bottom: 15px;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;font-weight: bold}
  .bot:hover{ background-color: #0061a1 ; color: #f1f1f1 }
  .nave p {text-align:left}
  .nave .check{background: #f1f1f1;color:#0061a1;}
  .nave  span:hover{background: #f1f1f1;color:#0061a1;font-size:14px;}
  .nave  span{text-align: center; color:#f1f1f1; line-height:.6rem; padding:.05rem .2rem;}

</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-workChart',
    data () {
      return {
        check:'',
        show:false,
        botData : [{
          name:"",
          bizId:''
        }],
        botData2 : [{
          name:"",
          bizId:''
        }],
        fromData:{name:''},
        page:{page:1,pageSize:10,count:0}
      }
    },
    methods: {
      ...mapActions({
        delUser: 'delUserList',
        showBizType: 'showBizType',
        showBizDetails: 'showBizDetails',
      }),
      login () {
        this.$router.push({ name: 'map' })
      },
      chart(id,index){
        if(index){
          this.check = index;
        }else {
          this.check= null
        }
        var parm = {id: id}
        this.showBizDetails(parm)
      },
      updateListFn(res){
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.page.count = Math.ceil(cunt / this.page.pageSize)
        }
        res = res.body.data
        this.botData = []
        this.botData2 = []
        var time = Public.publicLo.timeCheng()
        for (let i in res) {
          if(res[i].status ==0){  }else {
            var pu = {
              id: res[i].id,
              number: res[i].number,
              name: res[i].name,
              status: res[i].status,
              bizId:res[i].bizId,
              creatTmie: time.times,
              specialFlag:res[i].specialFlag,
              statusText: res[i].status==1?'可用':'不可用',
            }
            if(pu.specialFlag==1){
              this.botData.push(pu)
            }else {
              if(this.botData2.length==0){
                if(pu.bizId){
                  this.chart(pu.bizId)
                }
              }
              this.botData2.push(pu)
            }
          }
        }
      },
      //详情解析
      dataFn(res){
          res=res.body.data
           var time = Public.publicLo.timeCheng()
          if(res.creatTmie){
            time = Public.publicLo.timeCheng(res.createTime)
          }
          this.fromData={
            type: res.bizTypeId,
            title:res.bizTypeName,
            content:res.bizIntro,
            time: time.times
          }
      }
    },
    computed: {
      ListData: function () {
        var parm = this.updateList
        if (parm) {
          this.updateListFn(parm)
        }
        return 1
      },
      updateStatusData: function () {
        var parm = this.updateStatus
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      languageData: function () {
        var parm = this.language
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },

      DetailData() {
        var parm = this.Detail
        if (parm) {
          this.dataFn(parm)
        }
        return 1
      },
      ...mapState([
        'Detail',
        'language',
        'updateList',
        'updateStatus'
      ])
    },
    mounted () {
      // var width = document.body.clientWidth;
      // var dom = document.getElementById('main');
      // var w = width-240;
      // dom.style = 'max-width:'+ w +'px';
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
    }
  }
</script>

